<template>
  <a-layout class="home">
    <a-layout-sider class="home-sider scroll-hide">
      <a-anchor :affix="false" :getContainer="anchorContent" :offsetTop="24" @change="onChange">
        <a-menu class="menu" mode="inline" :selectedKeys="[curr]">
          <a-menu-item v-for="(item,index) in menuList" :key="index">
            <a-anchor-link  :href="'#'+item.key">
              <template slot="title">
                <a-icon :type="item.icon" />
                <span>{{$t(item.name)}}</span>
              </template>
            </a-anchor-link>
          </a-menu-item>
        </a-menu>
      </a-anchor>
    </a-layout-sider>
    
    <a-layout-content class="home-content beauty-scroll" ref="container">
      <a-row :gutter="24">
        <a-col id="home" :span="16">
          <a-card hoverable class="swiper">
            <a-carousel class="h370" arrows>
              <div slot="prevArrow" class="custom-slick-arrow" style="left:0;border-radius:0 8px 8px 0;">
                <a-icon type="left-circle" />
              </div>
              <div slot="nextArrow" class="custom-slick-arrow" style="right:0;border-radius:8px 0 0 8px;">
                <a-icon type="right-circle" />
              </div>
              <div class="swiper-item h370" v-for="item in swiper" :key="item.id">
                <img :src="item.src" alt="" srcset="">
              </div>
            </a-carousel>
          </a-card>
        </a-col>
        <a-col :span="8">
          <home-card class="notice" :title="$t('announcement')" :loading="loading" path="#/home/list/proclamation">
            <ul class="news-list" slot="content">
              <li v-for="(item,index) in notice" :key="index">
                <router-link :to="'/home/list/proclamation/'+item.id">
                  <span class="text-hide item-title">{{item.title}}</span><span class="item-time">{{item.time}}</span>
                </router-link>
              </li>
            </ul>
          </home-card>
        </a-col>
        <a-col class="m-t-24" :span="16"><home-card :title="$t('trends')" :loading="loading" :list="trends" :col="2" path="#/home/list/trends" /></a-col>
        <a-col class="m-t-24" :span="8"><home-card :title="$t('special')" :loading="loading" path="#/home/list/special">
          <a-list :grid='{ gutter: 24, span: 24 }' style="margin: 0 -8px" slot="content">
            <a-list-item v-for="(item,index) in special" :key="index" style="padding: 0 8px">
              <router-link :to="'/home/list/special/'+item.id">
                <a-card type="inner" hoverable style="cursor:pointer;">
                  <img slot="cover" :src="item.src" height="156"/>
                </a-card>
              </router-link>
            </a-list-item>
          </a-list> 
        </home-card></a-col>
        <a-col class="m-t-24" id="home/news" :span="24"><home-card :title="$t('news')" :loading="loading" :list="news" path="#/home/list/news" /></a-col>
        <a-col class="m-t-24" id="home/notice" :span="24"><home-card :title="$t('notice')" :loading="loading" :list="news" path="#/home/list/notice" /></a-col>
        <a-col class="m-t-24" id="home/develop" :span="24"><home-card :title="$t('develop')" :loading="loading" :list="news" path="#/home/list/develop" /></a-col>
        <a-col class="m-t-24" id="home/charge" :span="24"><home-card :title="$t('charge')" :loading="loading" :list="news" path="#/home/list/charge" /></a-col>
        <a-col class="m-t-24" id="home/source" :span="24"><home-card :title="$t('source')" :loading="loading" :list="news" path="#/home/list/source" /></a-col>
        <a-col class="m-t-24" id="home/quality" :span="24"><home-card :title="$t('quality')" :loading="loading" :list="news" path="#/home/list/quality" /></a-col>
        <a-col class="m-t-24" id="home/union" :span="24"><home-card :title="$t('union')" :loading="loading" :list="news" path="#/home/list/union" /></a-col>
        <a-col class="m-t-24" id="home/science" :span="24"><home-card :title="$t('science')" :loading="loading" :list="news" path="#/home/list/science" /></a-col>
        <a-col class="m-t-24" id="home/message" :span="24"><home-card :title="$t('message')" :loading="loading" :list="news" path="#/home/list/message" /></a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>
<script>
import {mapState} from 'vuex';
import HomeCard from '@/components/homeCard/HomeCard'
import { swiper, notice, special, trends, news } from '@/services/dataSource';
export default {
  name: 'home',
  i18n: require('./i18n'),
  data(){
    return {
      curr: 0,
      menuList: [
        {id:0,key:'home',name:'home',icon:'home'},
        {id:1,key:'home/news',name:'news',icon:'global'},
        {id:2,key:'home/notice',name:'notice',icon:'notification'},
        {id:3,key:'home/develop',name:'develop',icon:'bar-chart'},
        {id:4,key:'home/charge',name:'charge',icon:'switcher'},
        {id:5,key:'home/source',name:'source',icon:'team'},
        {id:6,key:'home/quality',name:'quality',icon:'safety-certificate'},
        {id:7,key:'home/union',name:'union',icon:'schedule'},
        {id:8,key:'home/science',name:'science',icon:'rocket'},
        {id:9,key:'home/message',name:'message',icon:'message'},
      ],
      anchorContent: ()=> this.$refs.container.$el,
      cardList:[],
      swiper:[],
      notice:[],
      special:[],
      trends:[],
      news: [],
      loading: false,
    }
  },
  computed: {
    ...mapState('setting',['lang']),
  },
  components: {HomeCard},
  mounted(){
    this.loading = true;
    this.getSwiper();
    this.getNotice();
    this.getSpecial();
    this.getTrends();
    this.getNews();
    setTimeout(()=>{
      this.loading = false;
    },1000)
  },
  methods:{
    onChange(e){
      let target = this.menuList.filter(item=>item.key==e.slice(1))[0]
      this.curr = target.id||0
    },
    getSwiper(){
      swiper().then(res=>{
        if(res.data.code==200) this.swiper = res.data.data
      })
    },
    getNotice(){
      notice().then(res=>{
        if(res.data.code==200) this.notice = res.data.data.splice(0,6)
      })
    },
    getSpecial(){
      special().then(res=>{
        if(res.data.code==200) this.special = res.data.data
      })
    },
    getTrends(){
      trends().then(res=>{
        if(res.data.code==200) this.trends = res.data.data
      })
    },
    getNews(){
      news().then(res=>{
        if(res.data.code==200) this.news = res.data.data
      })
    },
  }
}
</script>
<style lang="less" scoped>
  .home{
    .home-sider{
      background-color: @base-bg-color;
      position: fixed;
      height: 100vh;
      overflow-y: scroll;
      left: 0;
      /deep/.ant-menu-item{
        height: 60px;
        line-height: 60px;
        margin-top: unset;
        margin-bottom: unset;
      }
      /deep/.ant-anchor-wrapper{
        padding-left: unset;
        overflow: unset;
      }
      /deep/.ant-anchor-link{
        line-height: unset;
        padding: unset;
      }
    }
    .home-content{
      margin-left: 200px;
      padding: 24px;
      .ant-card{
        border-radius: 8px;
        cursor: default;
      }
      .h370{
        height:370px;
      }
      .m-t-24{
        margin-top: 24px;
      }
      .swiper{
        /deep/.ant-card-body{
          padding: 0;
        }
        .swiper-item{
          border-radius: 8px;
          div{
            padding: 0;
            margin: 0;
          }
          img{
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }
        /deep/.slick-dots{
          bottom: 26px;
          li button{
            height:6px;
            border-radius: 8px;
          }
          .slick-active button{
            background: @primary-color;
          }
        }
        /deep/.slick-prev,/deep/.slick-next{
          width: 36px;
          height:34px;
          line-height: 34px;
          text-align:center;
          z-index: 1;
          background-color: fade(@title-color,45%);
        }
        /deep/.slick-prev:hover,/deep/.slick-next:hover{
          color: @primary-color;
        }
        /deep/.slick-prev::before,/deep/.slick-next::before{
          display: none;
        }
        .custom-slick-arrow{
          font-size: 26px;
          color: @base-bg-color;
        }
      }
      .news-list{
        list-style: none;
        margin-bottom: 0;
        padding-left: unset;
        li{
          height: 44px;
          line-height:44px;
          cursor: pointer;
          .item-title{
            width:72%;
            font-size: 16px;
            color: @text-color;
          }
          .item-time{
            width: 28%;
            text-align: end;
            float:right;
            color: @text-color;
          }
        }
        li:hover{
          .item-time,.item-title{
            color: @primary-color;
          }
        }
      }
      /deep/.ant-skeleton-content{
        padding: 0 24px;
      }
    }
  }
  .text-hide{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>